<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>Register - Online EV</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="../..//static/css/login.css">
</head>

<body>

	<!-- loading mask before the page fully loaded -->
	<div class="justify-content-center text-center align-items-center " id="loading-mask">
		<div class="sr-only lead" id="loading-text">Loading...</div>
		<div class="spinner-border" role="status" id="loading-spinner"></div>
	</div>

		<div class="alert alert-success rounded notification-alert text-center mx-auto" role="alert" align="center"></div>
		
	<section class="h-100">
		<div class="container h-100">
			<div class="row justify-content-sm-center h-100">
				<div class="col-xxl-4 col-xl-5 col-lg-5 col-md-7 col-sm-9">

					<div class="text-center my-5">
						<img src="../../static/img/logo.jpg" alt="logo" class="rounded-circle" width="100">
					</div>

					<div class="card fat shadow-lg">
						<div class="card-body p-5">
							<h1 class="fs-4 card-title fw-bold mb-4">Register</h1>
							<form method="POST" action="/auth/register-post" class="needs-validation" novalidate="" autocomplete="on">
								
								<!-- username -->
								<div class="mb-3">
									<label class="mb-2 text-muted" for="name">Username</label>
									<input id="username" type="text" pattern=".{1,64}" class="form-control rounded-pill" name="username" value="" required autofocus>
									<div class="invalid-feedback" id="client-username">
										Username is required, 1 to 64 characters
									</div>
									<div class="invalid-feedback" id="username-feedback">	
									</div>
								</div>

								<!-- password -->
								<div class="mb-3">
									<label class="mb-2 text-muted" for="password">Password</label>
									<input id="password" type="password" pattern=".{6,}" class="form-control rounded-pill" name="password" required>
								    <div class="invalid-feedback" id="client-password">
								    	Password is required, at least 6 characters
							    	</div>
									<div class="invalid-feedback" id="password-feedback">
									</div>
								</div>

								<!-- user-type -->
								<div class="col-md-6">
									<label for="validationServer04" class="mb-2 text-muted">Register User Type</label>
									<select class="form-select rounded-pill" name="user_type" id="validationServer04" aria-describedby="validationServer04Feedback" required>
										<option selected class="rounded-pill">user</option>
										<option class="rounded-pill">admin</option>
									</select>
									<div class="invalid-feedback">
										Please select your user type
									</div>
								</div>

							
								<div class="align-items-center d-flex">
									<button type="submit" class="btn btn-primary ms-auto rounded-pill shadow">
										Register	
									</button>
								</div>

							</form>
						</div>
						<div class="card-footer py-3 border-0">
							<div class="text-center">
								Already have an account? <a href="/auth/login" class="text-dark">Login</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
	<script src="../../static/scripts/login.js"></script>
</body>
</html>